DropDownList = function(scene, camera, items) {
	
	this.scene = scene;
	this.camera = camera;
	this.listItems = items;
	
	this.selectedIndex = 0;
	this.selectedItem = this.listItems[this.selectedIndex];
	
	this.mainBoxColor = 0x00ff00;
	this.mainBoxOpacity = 0.5;
	this.mainBoxWidth = 400;
	this.mainBoxHeight = 70;
	this.mainBoxDepth = 70;
	
	this.selectedItem;
	this.mainBoxMesh;
	this.mainBoxGeometry;
	this.mainBoxMaterial;
	this.itemsMeshes = [];
	this.projector = new THREE.Projector();
	
	this.expand = function () {
		this.mainBoxMesh.add(this.itemsBoxMesh);
	}
	this.collapse = function () {
		this.mainBoxMesh.remove(this.itemsBoxMesh);
	}
	this.createItemsBoxMesh = function() {
		this.itemsBoxMaterial = new THREE.MeshBasicMaterial( {opacity: 0.0, transparent: true} );
		this.itemsBoxGeometry = new THREE.CubeGeometry( 0, 0, 0 );
		this.itemsBoxMesh = new THREE.Mesh( this.itemsBoxGeometry, this.itemsBoxMaterial );
		
		for(var listItem in this.listItems) {
			this.listItems[listItem].PreInit(this);
		}
		for(var listItem in this.listItems) {
			this.listItems[listItem].Init(this);
			this.itemsBoxMesh.add(this.listItems[listItem].itemBoxMesh);
			if(listItem == 0) {
				this.listItems[listItem].itemBoxMesh.position.y = -this.listItems[listItem].itemBoxHeight/2 - 20;
			} else {
				this.listItems[listItem].itemBoxMesh.position.y = this.listItems[parseInt(listItem)-1].itemBoxMesh.position.y - this.listItems[listItem].itemBoxHeight - 20;
			}
			this.itemsMeshes.push(this.listItems[listItem].itemBoxMesh);
		}
		
		this.mainBoxMaterial = new THREE.MeshBasicMaterial( { color: this.mainBoxColor, opacity: this.mainBoxOpacity, transparent: true } );
		this.mainBoxGeometry = new THREE.CubeGeometry( this.mainBoxWidth, this.mainBoxHeight, this.mainBoxDepth );
		this.mainBoxMesh = new THREE.Mesh( this.mainBoxGeometry, this.mainBoxMaterial );
		this.itemsMeshes.push(this.mainBoxMesh);
		
		//test
		this.mainBoxMesh.position.x = Math.random() * 2000 - 1000;
		this.mainBoxMesh.position.y = Math.random() * 2000 - 1000;
		this.mainBoxMesh.position.z = Math.random() * 2000 - 1000;
		//END test

		this.itemsBoxMesh.position.y = -this.mainBoxHeight/2; 
	}
	
	this.createItemsBoxMesh();
	this.scene.add(this.mainBoxMesh);
	
	this.OnClick = function(event) {

		event.preventDefault();

		var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

		this.projector.unprojectVector( vector, this.camera );

		var ray = new THREE.Ray( this.camera.position, vector.subSelf( this.camera.position ).normalize() );

		var intersects = ray.intersectObjects( this.itemsMeshes );

		if ( intersects.length > 0 ) {

			var clickedMesh = intersects[ 0 ].object;
			
			if(clickedMesh == this.mainBoxMesh) {
				this.expand();
			} else {
				var clickedIndex = this.itemsMeshes.indexOf(clickedMesh);
				
				if(this.selectedItem && this.selectedItem.textMeshInHeader) {
					this.mainBoxMesh.remove(this.selectedItem.textMeshInHeader);
				}
				
				this.selectedItem = this.listItems[clickedIndex];
				this.selectedItem.textMeshInHeader = cloneMesh(this.selectedItem.itemTextMesh);

				this.mainBoxMesh.add(this.selectedItem.textMeshInHeader);
				this.collapse();
			}
			
		}

	}
	document.addEventListener( 'click', bindFn( this, this.OnClick ), false );
}

ListItem = function(text, value) {
	this.text = text;
	this.value = value;
	
	this.dropDownList;
	
	this.itemBoxColor = 0x0000ff;
	this.itemBoxOpacity = 0.7;
	
	this.textColor = 0xffffff;
	this.letterSize = 50;
	this.letterDepth = 5;
	this.textFont = 'helvetiker';
	this.textWeight = 'normal';
	this.textStyle = 'normal';
	
	this.itemBoxXoffset = 10;
	this.itemBoxYoffset = 20;
	
	this.textMeshInHeader;
	
	
	this.PreInit = function(dropDownList) {
		this.dropDownList = dropDownList;
		
		
		this.itemTextMaterial = new THREE.MeshBasicMaterial( { color: this.textColor, overdraw: true } );
		this.itemTextGeometry = new THREE.TextGeometry( this.text, {size: this.letterSize, height: this.letterDepth, curveSegments: 1, font: this.textFont, weight: this.textWeight, style: this.textStyle } )
		this.itemTextMesh = new THREE.Mesh(this.itemTextGeometry, this.itemTextMaterial);
			
		this.itemTextGeometry.computeBoundingBox();
		
		this.itemTextWidth = this.itemTextGeometry.boundingBox.max.x - this.itemTextGeometry.boundingBox.min.x;
		this.itemTextHeight = this.itemTextGeometry.boundingBox.max.y - this.itemTextGeometry.boundingBox.min.y;
		this.itemTextDepth = this.itemTextGeometry.boundingBox.max.z - this.itemTextGeometry.boundingBox.min.z;
		
		this.itemBoxWidth = this.itemTextWidth + 2*this.itemBoxXoffset;
		this.itemBoxHeight = this.itemTextHeight + 2*this.itemBoxYoffset;
		this.itemBoxDepth = 50;//this.itemTextGeometry.boundingBox.max.z - this.itemTextGeometry.boundingBox.min.z;
		
		
		if(this.itemBoxWidth > dropDownList.mainBoxWidth) {
			dropDownList.mainBoxWidth = this.itemBoxWidth;
		}
	}
	this.Init = function(dropDownList) {
		this.itemBoxMaterial = new THREE.MeshBasicMaterial( { color: this.itemBoxColor, opacity: this.itemBoxOpacity, transparent: true } );
		this.itemBoxGeometry = new THREE.CubeGeometry( dropDownList.mainBoxWidth, this.itemBoxHeight, this.itemBoxDepth );
		this.itemBoxMesh = new THREE.Mesh( this.itemBoxGeometry, this.itemBoxMaterial );
				
		this.itemBoxMesh.add(this.itemTextMesh);
			
		this.itemTextMesh.position.x = -dropDownList.mainBoxWidth/2 + this.itemBoxXoffset;
		this.itemTextMesh.position.y = -this.itemTextHeight/2;
		
		//THREE.GeometryUtils.merge(this.itemBoxGeometry, this.itemTextGeometry);
	}
	
}